<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="./font/iconfont.css">
	<style type="text/css">
		body,
		html {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}

		#allmap {
			width: 100%;
			height: 100%;
		}

		.queryContainer {
			text-align: center;
			line-height: 50px;
			width: 300px;
			height: 50px;
			background: #1e9ee9;
			border-radius: 15px;
			opacity: 0.8;
			left: 160px;
			top: 20px;
			position: absolute;
		}

		.origin i {
			font-size: 30px;
			color: #1e9ee9;
		}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
	<title>百度地图demo</title>
</head>

<body>
	<div id="allmap"></div>
	<div class="queryContainer">
		<label for="city">城市名: </label><input type="text" name="city" id="city" onkeydown="isSubmit(event)">
		<button onclick="locating()">定位</button>
	</div>
</body>

</html>
<script type="text/javascript">

	let map = new BMap.Map("allmap");    // 创建Map实例

	map.setCurrentCity("南京");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

	// 定位方式:
	// 根据经纬度进行定位
	map.centerAndZoom(new BMap.Point(118.797248, 32.025476), 12);

	// 根据城市名进行定位 
	function locating() {
		let cityName = document.getElementById('city').value
		if (cityName && cityName != '') {
			// 根据城市名进行定位
			map.centerAndZoom(cityName, 10)
		}
	}

	function isSubmit(e) {
		console.log(e);
		if (e && e.keyCode == 13) {
			locating()
		}
	}

	// 添加基本控件
	map.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT }));  // 导航条
	map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap.Size(100, 25) }));  // 地图比例尺
	map.addControl(new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_TOP_LEFT, isOpen: true })); // 小地图

	//  JS API 目前不支持3D地图
	map.addControl(new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(100, 25) })); //地图类型控制  

	// 添加自定义组件
	// 重新定位到夫子庙
	function BackToOrigin() {
		this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
		this.defaultOffset = new BMap.Size(10, 50);
	}

	BackToOrigin.prototype = new BMap.Control()
	BackToOrigin.prototype.initialize = function (map) {
		let container = document.createElement("div")
		container.innerHTML = `<span class="origin"><i class="iconfont icondingwei"></i></span>`
		container.style.cursor = "pointer"
		container.onclick = function (e) {
			let geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function (current) {
				console.log(current);
				if (this.getStatus() == BMAP_STATUS_SUCCESS) {
					let mk = new BMap.Marker(current.point);
					map.addOverlay(mk);
					map.panTo(current.point);
				}
				else {
					alert('failed' + this.getStatus());
				}
			}, { enableHighAccuracy: true })
		}
		map.getContainer().appendChild(container)
		return container
	}

	// 创建控件
	let backToOrigin = new BackToOrigin();
	// 添加到地图当中
	map.addControl(backToOrigin);
</script>